<template>
    <div class="motion">
        <header>
            <h4>运动</h4>
            <i class="yo-ico">&#xe616;</i>
            <div class="s-xhx"></div>
            <ul>
                <li>计划</li>
                <li>跑步</li>
                <li>骑行</li>
                <li>健身</li>
                <li>瑜伽</li>
            </ul>
        </header>
        <main>
            <!-- <Plan></Plan> -->
        </main>
        <!-- <footer></footer> -->
    </div>
</template>



<script>
// import Plan from './motion-plan'
export default {
    // components:{
        // Plan
    // }
}
</script>




<style lang="stylus" scoped>
header 
    width 375px
    height 84px
    // background red
    h4
        height 44px
        line-height 44px
        font-size 20px
        font-weight 700
        color #323133
        padding-left 12px
    i 
        float right
        margin-top -36px
        margin-right 20px
        font-size 20px
        font-weight 700
        color #323133
    .s-xhx
        width 40px
        height 6px
        background rgba(107, 92, 235, 1)
        position relative
        top 30px
        left 9px
        opacity 0.9
    ul 
        padding-left 14px
        height 40px
        line-height 40px
        // background green
        li
            font-weight 700
            color #ccc
            float left
            width 64px
            height 40px
            &:first-child
                color #323133



</style>